<template>
  <div class="tankuang">
    <strong><p>信息显示</p></strong>
    <button class="end" @click="close">关闭</button>
    <el-tabs style="width:90%;" v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first"
        >
        <div class="shuxie1">
          <el-form ref="form" label="left" label-width="80px" size="mini">
            <el-form-item label="姓名">
              <el-input ></el-input>
            </el-form-item>
            <el-form-item label="证件类型">
              <el-input ></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input ></el-input>
            </el-form-item>
            <el-form-item label="民族">
              <el-input ></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱">
              <el-input ></el-input>
            </el-form-item>
            <el-form-item label="工作时间">
              <el-input ></el-input>
            </el-form-item>
            <el-form-item label="行政职务">
              <el-input ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="shuxie2">
          <el-form ref="form"  label-width="80px" size="mini">
            <el-form-item label="性别">
              <el-input ></el-input>
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input ></el-input>
            </el-form-item>
            <el-form-item label="出生日期">
              <el-input ></el-input>
            </el-form-item>
            <el-form-item label="籍贯">
              <el-input ></el-input>
            </el-form-item>
            <el-form-item label="固定电话">
              <el-input ></el-input>
            </el-form-item>
            <el-form-item label="政治面貌">
              <el-input ></el-input>
            </el-form-item>
            <el-form-item label="行政级别">
              <el-input ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">
        <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="sort1"
      label="编号"
      width="50">
    </el-table-column>
    <el-table-column
      prop="date1"
      label="起始时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="date2"
      label="结束时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="work1"
      label="从事专业技术工作"
      width="180">
    </el-table-column>
    <el-table-column
      prop="post1"
      label="职务"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address1"
      label="单位">
    </el-table-column>
  </el-table>
      </el-tab-pane>
      <el-tab-pane label="学历信息" name="third">
        <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="sort2"
      label="编号"
      width="50">
    </el-table-column>
    <el-table-column
      prop="date3"
      label="入学时间"
      width="150">
    </el-table-column>
    <el-table-column
      prop="date4"
      label="毕业时间"
      width="150">
    </el-table-column>
    <el-table-column
      prop="school1"
      label="毕业院校"
      width="180">
    </el-table-column>
    <el-table-column
      prop="major1"
      label="所学专业"
      width="180">
    </el-table-column>
    <el-table-column
      prop="major1"
      label="学历"
      width="100">
    </el-table-column>
    <el-table-column
      prop="address2"
      label="学位">
    </el-table-column>
  </el-table>
      </el-tab-pane>
      <el-tab-pane label="资历信息" name="fourth">
        <div class="shuxie3">
          <el-form ref="form" label="left" label-width="80px" size="mini">
            <el-form-item label="单位所在地区">
              <el-input ></el-input>
            </el-form-item>
            <el-form-item label="现专业技术系列">
              <el-input ></el-input>
            </el-form-item>
            <el-form-item label="专技资格名称">
              <el-input ></el-input>
            </el-form-item>
            <el-form-item label="聘现专业技术系列">
              <el-input ></el-input>
            </el-form-item>
            <el-form-item label="聘任时间">
              <el-input ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="shuxie4">
          <el-form ref="form"  label-width="80px" size="mini">
            <el-form-item label="所在单位名称">
              <el-input ></el-input>
            </el-form-item>
            <el-form-item label="现资格专业">
              <el-input ></el-input>
            </el-form-item>
            <el-form-item label="获取资格时间">
              <el-input ></el-input>
            </el-form-item>
            <el-form-item label="聘专技资格名称">
              <el-input ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="社会团体任职" name="fifth">
        <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="sort2"
      label="编号"
      width="50">
    </el-table-column>
    <el-table-column
      prop="date5"
      label="起始时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="date6"
      label="结束时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="social1"
      label="社会团体名称"
      width="250">
    </el-table-column>
    <el-table-column
      prop="post2"
      label="任何职务">
    </el-table-column>
  </el-table>
      </el-tab-pane>
      <el-tab-pane label="继续教育" name="sixth">
           <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="sort2"
      label="编号"
      width="50">
    </el-table-column>
    <el-table-column
      prop="date7"
      label="继续教育年度"
      width="180">
    </el-table-column>
    <el-table-column
      prop="major2"
      label="专业或主要内容"
      width="300">
    </el-table-column>
    <el-table-column
      prop="place1"
      label="学习地点">
    </el-table-column>
    </el-table>
      </el-tab-pane>
      <el-tab-pane label="职业/执业资格" name="seventh"
        >
        <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="sort2"
      label="编号"
      width="50">
    </el-table-column>
    <el-table-column
      prop="name2"
      label="资格名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="num1"
      label="资格证号码"
      width="180">
    </el-table-column>
    <el-table-column
      prop="channel1"
      label="获得资格途径"
      width="250">
    </el-table-column>
    <el-table-column
      prop="level1"
      label="级别">
    </el-table-column>
    </el-table>
        </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      tableData: [{}],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    close() {
      this.$store.commit("changeIsShow");
    },
  },
};
</script>

<style>
.tankuang {
  width: 1000px;
  height: 500px;
  background-color: #fff;
}
.shuxie1 {
  float: left;
  width: 35%;
  height: 100%;
}
.shuxie2 {
  float: left;
  width: 35%;
  height: 100%;
}
.shuxie3 {
  float: left;
  width: 35%;
  height: 100%;
}
.shuxie4 {
  float: left;
  width: 35%;
  height: 100%;
}
.end{
  float: right;
margin-right: 5%;
}
</style>